<template>
	<view class="text-white">
		<cu-custom bgColor="nav-bg-blue" :isBack="true">
			<block slot="content"> 
				线路规划
			</block>
		</cu-custom>
		<view class="sw-banner">
			<swiper class="screen-swiper round-dot sw-menu" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" v-show="swiperList.length > 0">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
		</view>
		<view class="plan-box">
			<view class="plan-box-item">
				<text>起点</text>
				<input v-if="isFont" @click="toSearch('start_position')" v-model="start_position.name" disabled="true" />
				<input v-else @click="toSearch('end_position')" v-model="end_position.name" disabled="true" placeholder="请输入起点"/>
			</view>
			<view class="plan-box-item">
				<text>终点</text>
				<input v-if="isFont" @click="toSearch('end_position')" v-model="end_position.name" disabled="true" placeholder="请输入终点" />
				<input v-else @click="toSearch('start_position')" v-model="start_position.name" disabled="true" />
			</view>
			<image src="../../static/line/line_s.png" @tap.end="changeFont"></image>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				isFont: true,
				
				start_position: {
					name: '我的位置',
					location: {
						latitude : 0,
						longitude : 0
					}
				},
				end_position: {
					name: '',
					location: {
						latitude : 0,
						longitude : 0
					}
				},
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'http://pandaweb.pandabus.cn/huaian/2021_09_23/16323647802021192.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'http://pandaweb.pandabus.cn/huaian/2021_09_23/16323647915397676.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'http://pandaweb.pandabus.cn/huaian/2021_08_05/16281285638189499.jpg'
				}],
			}
		},
		computed:{
			...mapState(['position','akey']),
		},
		onLoad() {
			let position = this.position
			this.start_position.location.latitude = position.lat
			this.start_position.location.longitude = position.lng
		},
		methods: {
			changeFont(){
				console.log(3333333333)
				this.isFont = !this.isFont
			},
			toSearch(name){
				uni.navigateTo({
					url: '/pages/home/plansearch?name='+name
				})
			}
		}
	}
</script>

<style>
.plan-box{
	background-color: #FFFFFF;
	position: relative;
}
.plan-box .plan-box-item{
	height: 48px;
	border: 1px solid #EEEEEE;
	padding: 0 100rpx;
	line-height: 48px;
}
.plan-box .plan-box-item text{
	float: left;
	color: #999999;
	font-size: 32rpx;
}
.plan-box .plan-box-item input{
	color: #333333;
	height: 48px;
	padding-left: 50rpx;
}
.plan-box image{
	border: 1px solid #999999;
	background-color: #FFFFFF;
	border-radius: 30rpx;
	padding: 10rpx;
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	top: 36px;
	right: 90rpx;
	z-index: 100;
}
</style>
